<template>
  <div style="margin-left: 2px;" @mouseover="showCopy(true)" @mouseout="showCopy(false)">
    <slot/>
    <i v-show="content && showFlag" style="cursor: pointer;" title="复制" class="fa fa-clipboard" aria-hidden="true" @click="handleClipboard(content,$event)" />
  </div>
</template>
<script>
import clipboard from '@/utils/clipboard'
export default {
  name: 'ClipboardButton',
  props: {
    content: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      showFlag: false
    }
  },
  methods: {
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    showCopy(flag) {
      this.$nextTick(() => {
        this.showFlag = flag
      })
    }
  }
}
</script>
<style scoped>
  .fa-clipboard{

  }
</style>
